<template>
	<view :style="{height:height}" class="IctCascader">
		<ListColumn padding="20rpx" :margin="ListColumnParams.margin" :backGround="ListColumnParams.backGround" @itemSwitch="itemSwitch" activeColor="#465CFF"  :isNumArray="ListColumnParams.isNumArray" :letterSpacing="ListColumnParams.letterSpacing" :activeNum="ListColumnParams.activeNum" name="field" :datas="listColumnDatas" datasName="name" fontSize="28rpx" fontSizeActive="30rpx"></ListColumn>
		<view class="body">
			<view @click="selectAcitveTree(item)" v-for="(item,index) in ReturnTree" class="item">
				<view style="display: flex; align-items: center;">
				  <image v-if="selectArr[ListColumnParams.activeNum] && item[value] === selectArr[ListColumnParams.activeNum][value]" 
						 src="@/static/img/icon/selectActive.png"></image>
				  <text :class="selectArr[ListColumnParams.activeNum] && item[value] === selectArr[ListColumnParams.activeNum][value] ? 'activeText' : ''">
					{{item[label]}}
				  </text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import ListColumn from './ListColumn.vue';
	export default {
		components:{ListColumn},
		props:{
		 height:{
			type:[Number, String],
			default(){
			  return '25vh'
			} 
		 },	
		 datas:{
			 type:Array,
			 default(){
				return []
			 }
		 },
		 label:{
			 type:String,
			 default:"label"
		 },
		 value:{
			 type:String,
			 default:"id"
		 }
		},
		watch:{
			datas(newVal){
				this.datasArr = newVal
			}
		},
		data() {
			return {
				ListColumnParams:{color:"#212121",backGround:"#ffffff",activeNum:0,activeColor:"#000000",activeBorderBottom:"2px solid #465CFF",letterSpacing:'2px',isNumArray:[],margin:"0px"},
				listColumnDatas:["请选择"],
				datasArr:this.datas,
				selectArr:[],//当前选中的数组
				activeObj:{},//最终选中的数据
				bodyDatas:[],//当前body展示的数据
			};
		},
		methods:{
			itemSwitch(index,name){
				this.ListColumnParams.activeNum = index
				this.selectaActiveChange(index)
			},
			/*
			isNum:当前第几个
			*/
			selectaActiveChange(isNum){ 
				let arr = this.selectArr
				if(isNum == 0){
					this.bodyDatas = this.datasArr
					this.listColumnDatas = ["请选择"]
				}else{
					this.bodyDatas = this.selectArr[isNum - 1].children
				}
				console.log(this.selectArr)
			},
			selectAcitveTree(item){
				if(typeof this.selectArr[this.ListColumnParams.activeNum] == "undefined"){
					this.selectArr.push(item)
					// this.listColumnDatas[this.ListColumnParams.activeNum] = item[this.label]
					this.$set(this.listColumnDatas, this.ListColumnParams.activeNum, item[this.label])
					if(typeof this.listColumnDatas[this.ListColumnParams.activeNum + 1] == "undefined"){
						console.log("test")
						if(typeof this.selectArr[this.ListColumnParams.activeNum].children == "undefined"){
							// this.listColumnDatas[this.ListColumnParams.activeNum] = item[this.label]
							// this.bodyDatas = []
						}else{
							this.listColumnDatas.push("请选择")
							this.bodyDatas = this.selectArr[this.ListColumnParams.activeNum].children
							this.ListColumnParams.activeNum+=1
						}
					}else{
						if(typeof this.selectArr[this.ListColumnParams.activeNum].children == "undefined"){
							this.bodyDatas = []
						}else{
							this.listColumnDatas[this.ListColumnParams.activeNum + 1] = "请选择"
							this.bodyDatas = this.selectArr[this.ListColumnParams.activeNum].children
							this.ListColumnParams.activeNum+=1
						}
					}
				}else{
					//去校验是否重复选择
					if(this.selectArr[this.ListColumnParams.activeNum][this.value] != item[this.value]){//如果不相同的话
						//清掉后续的内容
						this.selectArr.splice(this.ListColumnParams.activeNum +1)
						this.listColumnDatas.splice(this.ListColumnParams.activeNum +1)
						this.bodyDatas = item.children
					}
					this.selectArr[this.ListColumnParams.activeNum] = item
					this.listColumnDatas[this.ListColumnParams.activeNum] = item[this.label]
					console.log(this.listColumnDatas[this.ListColumnParams.activeNum + 1])
					if(typeof this.listColumnDatas[this.ListColumnParams.activeNum + 1] == "undefined"){
						if(typeof this.selectArr[this.ListColumnParams.activeNum].children == "undefined"){
							this.bodyDatas = []
						}else{
							this.listColumnDatas[this.ListColumnParams.activeNum + 1] = "请选择"
							this.bodyDatas = item.children
							this.ListColumnParams.activeNum+=1
						}
					}else{
						// this.listColumnDatas[this.ListColumnParams.activeNum + 1] = "请选择"
						console.log("cs")
						if(typeof this.selectArr[this.ListColumnParams.activeNum].children == "undefined"){
							this.bodyDatas = []
						}else{
							// this.listColumnDatas[this.ListColumnParams.activeNum + 1] = "请选择"
							this.bodyDatas = item.children
							this.ListColumnParams.activeNum+=1
						}
					}
				}
			}
		},
		computed:{
			ReturnTree(){
				this.activeObj = this.selectArr[this.ListColumnParams.activeNum - 1]
					if(typeof this.selectArr[this.ListColumnParams.activeNum] == "undefined"){
						this.activeObj = this.selectArr[this.ListColumnParams.activeNum - 1]
					}else{
						this.activeObj = this.selectArr[this.ListColumnParams.activeNum]
					}
					if(typeof this.activeObj !== "undefined"){
						this.$emit("cascaderChange",this.activeObj)
					}
				return  this.selectArr.length < 1 ? this.datasArr:this.bodyDatas
			}
		}
	}
</script>

<style scoped lang="scss">
.IctCascader{
	width: 100%;
	display: flex;
	flex-direction: column;
	.head{
		display: flex;
		padding: 0.5rem;
	}
	.body{
		flex:1;
		position: relative;
		overflow-y: auto;
	}
	.item{
		padding: 0.85rem 1rem;
		text{
			color: #606266;
			font-size: 28rpx;
			letter-spacing: 1px;
			padding: 0px 0.25rem;
		}
		image{
			width: 35rpx;
			height: 35rpx;
		}
	}
	.activeText{
		font-size: 30rpx !important;
		color:#465CFF !important;
	}
}
</style>